<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
        /* * {margin:0; padding:0; list-style:none;}
        #ul1{width: 500px;height: 500px;background:green;}
        #ul1 li {width:100px; height:100px; background:#CCC; float:left; margin:10px;} */
        .demo{width:200px;height:200px;border:1px solid red;overflow-y:scroll;margin-top:50px;}
        .scroll{height:5000px;}
        </style> 
</head>
<body>
    <!-- <ul id="ul1">
        <p>aa</p>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul> -->

    <div class="wrap">
        <div id="nothing" class="demo">
            普通滚动
            <div class="scroll"></div>
        </div>
		<div id="debounce" class="demo">
            函数防抖
            <div class="scroll"></div>
        </div>
        <div id="throttle" class="demo">
            函数节流
            <div class="scroll"></div>
        </div>

    </div>
    <script>
        //  	var timer =null;
		// document.getElementById("debounce").onscroll = function(){
		// 	clearTimeout(timer)
		// 	timer=setTimeout(function(){
		// 		console.log('函数防抖')
		// 	},300)
			
		// } 
        
        var on =true;
		document.getElementById("throttle").onscroll = function(){
			if(on) {
				on=false
				setTimeout(function(){ 
					on=true  
					console.log('函数节流')
				},300)
			}
		} 

        //  var oUl=document.getElementById('ul1')
        //  oUl.onclick=function(e){
        //        console.log('事件对象',e.target.nodeName)
        //        let oli=e.target
        //        if(oli.nodeName=='LI'){
        //         oli.style.background="red"
        //        }
        //  }

//       oUl.onclick=function (ev)
//   {
// 	  var oEvent=ev||event;
// 	  var oSrc=oEvent.srcElement||oEvent.target;
	  
// 	  console.log(oSrc); 
// 	  console.log(oSrc.nodeName)  
	  
// 	  //让li变色
// 	  if(oSrc.nodeName.toLowerCase()=="li"){
// 		  oSrc.style.background='red';
// 	  }  		
//   }	 
  

    </script>
</body>
</html>